<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="utf-8" />
	<title>水果列表页</title>
	<link rel="stylesheet" type="text/css" href="css/public.css" />
	<link rel="stylesheet" type="text/css" href="css/proList.css" />
	<link rel="stylesheet" type="text/css" href="css/mygrxx.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script>
		//模糊查询 
		function fuzzyQueryFruit() {
			var fname = document.getElementById("fname").value;
			console.log(fname);
			$.ajax({
				url: "http://localhost:8088/fruit/fuzzyQueryFruit/" + fname,
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					$("#frultList").html('');
					$("#frultList1").html('');
					$(".current").html('');
					var li = '';
					for (fruits of data) {

						li +=
							`<li>
								<div id="fid" style="display:none">${fruits.fid}</div>
									<dl>
										<dt><img src="${fruits.furl}"></dt>
										<dd>【${fruits.fname}】${fruits.fdetail}</dd>
										<dd style="margin-left: 220px;">￥${fruits.fprice}</dd>
									</dl>
								</a>
							</li>`;
					}
					$("#frultList").append(li);
					$("#frultList li").on('mouseenter', function () {
						var html = "";
						html = '<p class="quick" onclick="b(\'' + $(this).find("#fid").html() + '\')">快速浏览</p>';
						$(this).css('border', '1px solid #000').append(html);
						$(".quick").on('click', function () {
							$(".mask").show();
							$(".proDets").show();
						});
						$(".btns .cart").click(function () {
							if ($(".categ p").hasClass("on")) {
								$(".proDets").hide();
								$(".mask").hide();
							}
						});
					});
					$("#frultList li").on('mouseleave', function () {
						$(this).find("p").remove();
						$(this).css('border', '1px solid #fff');
					});
				},
				error: function () {
					alert("获取失败");
				}
			})
		}
		//查询柑橘种类水果
		function MelonFruit(ftype) {
			// var ftype=$("#MelonFruit").html();
			$.ajax({
				url: "http://localhost:8088/fruit/getFruitListByType/" + ftype,
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					// alert("成功");
					var li = '';
					for (fruits of data) {

						li +=
							`<li>
								<div id="fid" style="display:none">${fruits.fid}</div>
									<dl>
										<dt><img src="${fruits.furl}"></dt>
										<dd>【${fruits.fname}】${fruits.fdetail}</dd>
										<dd style="margin-left: 220px;">￥${fruits.fprice}</dd>
									</dl>
								</a>
							</li>`;
					}
					$("#frultList").append(li);
					$("#frultList li").on('mouseenter', function () {
						var html = "";
						html = '<p class="quick" onclick="b(\'' + $(this).find("#fid").html() + '\')">快速浏览</p>';
						$(this).css('border', '1px solid #000').append(html);
						$(".quick").on('click', function () {
							$(".mask").show();
							$(".proDets").show();
						});
						$(".btns .cart").click(function () {
							if ($(".categ p").hasClass("on")) {
								$(".proDets").hide();
								$(".mask").hide();
							}
						});
					});
					$("#frultList li").on('mouseleave', function () {
						$(this).find("p").remove();
						$(this).css('border', '1px solid #fff');
					});

				},
				error: function () {
					alert("获取失败");
				}
			});
		};
		//根据水果id查询水果详情
		function b(fid) {
			$.ajax({
				url: "http://localhost:8088/fruit/getFruitById/" + fid,
				type: "GET",
				dataType: 'json',
				// jsonp: 'callback',
				// jsonpCallback: "success",//这里指定回调函数为success
				success: function (data) {
					var div1 = `<h4 class="fl">【` + data.data.fname + `】 ` + data.data.fdetail + `</h4>
								<span class="fr">`+ '￥' + data.data.fprice + `</span>`;
					$("#tit1").html(' ');
					$("#tit1").append(div1);
					var span1 = data.data.fstock;
					window.localStorage.setItem('span1', span1);
					$("#span1").html(' ');
					$("#span1").append(span1);
					var img1 = `<img style="width: 360px;height: 360px;" class="list" src="` + data.data.furl + `" />`
					$("#Img1").html(' ');
					$("#Img1").append(img1);

					var size1 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】1KG" data-src="` + data.data.furl + `" />`
					$("#size1").html(' ');
					$("#size1").append(size1);
					var size2 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】2KG" data-src="` + data.data.furl + `" />`
					$("#size2").html(' ');
					$("#size2").append(size2);
					var size3 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】3KG" data-src="` + data.data.furl + `" />`
					$("#size3").html(' ');
					$("#size3").append(size3);
					var size4 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【尝鲜】500g" data-src="` + data.data.furl + `" />`
					$("#size4").html(' ');
					$("#size4").append(size4);
					$(".proIntro .smallImg p img").hover(function () {
						$(this).parents(".smallImg").find("span").remove();
						var lf = $(this).position().left;
						var con = $(this).attr("alt");
						$(this).parent("p").addClass('on');
						$(this).parents(".smallImg").append('<span>' + con + '</span>');
						$(".smallImg").find("span").css("left", lf);
					}, function () {
						$(this).parents(".smallImg").find("span").remove();
						$(this).parent("p").removeClass('on');
					});
					$(".proIntro .smallImg img").click(function () {
						var offset = $(this).attr("data-src");
						//小弹框和详情页图片大小不一样
						$(this).parents(".proCon").find('.proImg').children(".det").attr("src", offset).css({ 'width': '580px', 'height': '580px' });
						$(this).parents(".proCon").find('.proImg').children(".list").attr("src", offset).css({ 'width': '360px', 'height': '360px' });
						$(this).parents(".smallImg").find("span").remove();
						$(this).parent("p").addClass('on').siblings().removeClass('on');
						//移除鼠标离开事件
						$(this).off("mouseleave").parent('p').siblings().find('img').on('mouseleave', function () {
							$(this).parents(".smallImg").find("span").remove();
							$(this).parent("p").removeClass('on');
						})
					});
					$("#buyCar").click(function () {
						var uid = window.localStorage.getItem('uid');
						if (uid == null) {
							alert("请先登录！")
							window.location.href = "login.html";
							return;
						}
						var number = document.getElementById("snumber").innerHTML;
						axios.get("http://localhost:8088/shopcar/ifexist/" + window.localStorage.getItem("uid") + "/" + fid, {

						}).then(res => {
							console.log("查找是否存在" + res.data)
							if (res.data == 1) {
								alert("购物车已存在该商品。请前往购物车直接添加数量")
								window.location.href = "cart.html";
							} else if (res.data == 0) {
								axios.get("http://localhost:8088/shopcar/save", {
									params: {
										fid: fid,
										uid: window.localStorage.getItem("uid"),
										furl: data.data.furl,
										fname: data.data.fname,
										sprice: data.data.fprice,
										snumber: number,
										price: data.data.fprice * number,
									}
								})
									.then(res => {
										alert("加入" + data.data.fname + "*" + number + "成功")
										window.location.href = "cart.html";
									})
							}
						})

					})
					$("#buyOrder").click(function () {
						var uid = window.localStorage.getItem('uid');
						if (uid == null) {
							alert("请先登录！")
							window.location.href = "login.html";
							return;
						}
						$("#proDets").hide();
						$(".bj").show();
						var zjia = data.data.fprice * document.getElementById("snumber").innerHTML;
						axios.get('http://localhost:8088/coupan/getUsersCoupanList1/' + window.localStorage.getItem("uid"), {

						}).then(res => {
							console.log(res.data[0]);
							document.getElementById("onumber").value = document.getElementById("snumber").innerHTML;
							document.getElementById("onote").value = data.data.fname;
							document.getElementById("danjia").value = data.data.fprice;
							document.getElementById("zongjia").value = (data.data.fprice * document.getElementById("snumber").innerHTML).toFixed(2);

							for (coupan of res.data) {
								$("#coupan").append("<option value=" + coupan.cmoney + ">" + coupan.cname + "</option>")
							}
							// 添加订单
							// console.log($('#coupan option:selected').val());
							$('#coupan').change(function () {
								axios.get('http://localhost:8088/users/isMember/' + window.localStorage.getItem("uid")).then(res => {
									var sf = document.getElementById("zongjia").value - $(this).val();
									if (res.data == 1) {//判断会员
										console.log(document.getElementById("zongjia").value * 0.8 - $(this).val());
										sf = document.getElementById("zongjia").value * 0.8 - $(this).val();

									}
									if (sf < 0) {
										sf = 0;
									}
									document.getElementById("sf").innerHTML = sf.toFixed(2);
								})
							});
						})
					})
					$("#tobuy").click(function () {
						axios({
							url: 'http://localhost:8088/order/addOrder',
							method: 'post',
							data: {
								omessage: document.getElementById("omessage").value,
								oprice: (document.getElementById("danjia").value * document.getElementById("onumber").value).toFixed(2),
								onote: document.getElementById("onote").value,
								ocoupan: document.getElementById("coupan").value,
								orprice: document.getElementById("sf").innerHTML,
								zongjia: document.getElementById("zongjia").value,
								uid: window.localStorage.getItem("uid")
							},
						}).then(res => {
							console.log(res);
							window.location.href = "mygxin.html";
						})
					})
				},
				error: function () {
					alert("获取失败");
				}
			});
		};
		function Orange(ftype) {
			$.ajax({
				url: "http://localhost:8088/fruit/getFruitListByType/" + ftype,
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					// alert("成功");
					var li = '';
					for (fruits of data) {
						li +=
							`<li>
								<div id="fid" style="display:none">${fruits.fid}</div>
						
									<dl>
										<dt><img src="${fruits.furl}"></dt>
										<dd>【${fruits.fname}】${fruits.fdetail}</dd>
										<dd style="margin-left: 220px;">￥${fruits.fprice}</dd>
									</dl>
								</a>
							</li>`;
					}
					$("#frultList1").append(li);
					$("#frultList1 li").on('mouseenter', function () {
						var html = "";
						html = '<p class="quick" onclick="b(\'' + $(this).find("#fid").html() + '\')">快速浏览</p>';
						$(this).css('border', '1px solid #000').append(html);
						$(".quick").on('click', function () {
							$(".mask").show();
							$(".proDets").show();;
						});
						$(".btns .cart").click(function () {
							if ($(".categ p").hasClass("on")) {
								$(".proDets").hide();
								$(".mask").hide();
							}
						});
					});
					$("#frultList1 li").on('mouseleave', function () {
						$(this).find("p").remove();
						$(this).css('border', '1px solid #fff');
					});

				},
				error: function () {
					alert("获取失败");
				}
			});
		}
		$(function () {
			MelonFruit($("#MelonFruit").html());
			Orange($("#orange").html());
		});
		function a() {
			var span1 = '';
			var uname = window.localStorage.getItem('uname');
			var status = window.localStorage.getItem('status');
			if (status == 0) {
				span1 = `<span class="fl">` + `欢迎您&nbsp:&nbsp&nbsp&nbsp&nbsp` + uname + `</span>`
				$("#mygxin").html(" ");
				$("#mygxin").append(span1);
				$("#login").hide();
				$("#reg").hide();
			}
		}
		$(function () {
			a();
		})
		//隐藏mask框
		function hidden1() {
			$("#mask").hide();
			$(".bj").hide();
			location.reload();
		}
	</script>
</head>

<body id="app">
	<!------------------------------head------------------------------>
	<div class="head">
		<div class="wrapper clearfix">
			<div class="clearfix" id="top">
				<h1 class="fl"><a href="index.html"><img src="img/logo.png" style="width: 387px;
					height: 132px;
					position: absolute;
					margin-top: -34px;
					margin-left: -100px;
				" /></a></h1>
				<div class="fr clearfix" id="top1">
					<p class="fl">
						<a href="mygxin.html" id="mygxin"></a>
						<a href="login.html" id="login">登录</a>
						<a href="reg.html" id="reg">注册</a>
					</p>
					<form action="javascript:void(0)" method="get" class="fl">
						<input type="text" placeholder="热门搜索：荔枝" id="fname" />
						<input type="submit" value="" onclick="fuzzyQueryFruit()" />
					</form>

				</div>
			</div>
			<ul class="clearfix" id="bott">
				<li><a href="index.html">首页</a></li>
				<li>
					<a href="#">水果分类</a>
					<div class="sList">
						<div class="wrapper  clearfix">
							<a href="bzproList.html">
								<dl>
									<dd>瓜果类</dd>
								</dl>
							</a>
							<a href="paint2.html">
								<dl>
									<dd>浆果类</dd>
								</dl>
							</a>
							<a href="bzproList.html">
								<dl>
									<dd>柑橘类</dd>
								</dl>
							</a>
							<a href="paint.html">
								<dl>
									<dd>核果类</dd>
								</dl>
							</a>
							<a href="paint.html">
								<dl>
									<dd>坚果类</dd>
								</dl>
							</a>


						</div>
					</div>
				</li>
				<li>
					<a href="#">热销推荐</a>
					<div class="sList2">
						<div class="clearfix">
							<a href="bzproList.html">西瓜</a>
							<a href="bzproList.html">荔枝</a>
							<a href="bzproList.html">蓝莓</a>
							<a href="bzproList.html">香蕉</a>
							<a href="bzproList.html">杨梅</a>
							<a href="bzproList.html">葡萄</a>
							<a href="bzproList.html">哈密瓜</a>
							<a href="bzproList.html">芒果</a>
							<a href="bzproList.html">枇杷</a>
							<a href="bzproList.html">樱桃</a>
							<a href="bzproList.html">车厘子</a>
						</div>
					</div>
				</li>
				<li>
					<a href="bzproList.html">时令水果</a>
					<div class="sList2">
						<div class="clearfix">
							<a href="bzproList.html">火龙果</a>
							<a href="bzproList.html">西瓜</a>
							<a href="bzproList.html">荔枝</a>
							<a href="bzproList.html">李子</a>
							<a href="bzproList.html">杨梅</a>
							<a href="bzproList.html">百香果</a>
							<a href="bzproList.html">车厘子</a>
							<a href="bzproList.html">樱桃</a>
							<a href="bzproList.html">枇杷</a>
						</div>
					</div>
				</li>
				<li><a href="#">限时特卖</a></li>
				<li><a href="#">国产优选</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</div>

	<!------------------------------banner------------------------------>
	<div class="banner">
		<a href="#"><img src="img/2.jpg" style="width: 100%;height: 539px;" /></a>
	</div>
	<!-----------------address------------------------------->
	<div class="address">
		<div class="wrapper clearfix">
			<a href="index.html">首页</a>
			<span>/</span>
			<a href="decoration.html">新鲜水果</a>
		</div>
	</div>
	<!-------------------current---------------------->
	<div class="current">
		<div class="wrapper clearfix">
			<h3 class="fl" id="MelonFruit">瓜果类</h3>
			<div class="fr choice">
				<p class="default">排序方式</p>
				<ul class="select">
					<li>新品上市</li>
					<li>销量从高到低</li>
					<li>销量从低到高</li>
					<li>价格从高到低</li>
					<li>价格从低到高</li>
				</ul>
			</div>
		</div>
	</div>
	<!----------------proList------------------------->
	<ul class="proList wrapper clearfix" id="frultList">
		<!-- <li>
			<a href="proDetail.html">
				<dl>
						<dt></dt>
						<dd></dd>
						<dd></dd>
				</dl>
			</a>
		</li> -->

	</ul>
	<!-------------------current1---------------------->
	<div class="current" style="border-top: 1px solid #DBDBDB;">
		<div class="wrapper clearfix">
			<h3 class="fl" id="orange">柑橘类</h3>
			<div class="fr choice">
				<p class="default">排序方式</p>
				<ul class="select">
					<li>新品上市</li>
					<li>销量从高到低</li>
					<li>销量从低到高</li>
					<li>价格从高到低</li>
					<li>价格从低到高</li>
				</ul>
			</div>
		</div>
	</div>
	<!----------------proList1------------------------->
	<ul class="proList wrapper clearfix" id="frultList1">
		<!-- <li>
			<a href="proDetail.html">
				<dl>
						<dt></dt>
						<dd></dd>
						<dd></dd>
				</dl>
			</a>
		</li> -->

	</ul>
	<!----------------mask------------------->
	<div class="mask"></div>
	<!-------------------mask内容------------------->
	<div class="proDets" id="proDets">
		<img class="off" src="img/temp/off.jpg" />
		<div class="tit clearfix" id="tit1"></div>
		<div class="proCon clearfix">
			<div class="proImg fl">
				<div id="Img1"></div>
				<div class="smallImg clearfix">
				</div>
			</div>
			<div class="fr">
				<div class="proIntro">
					<p>水果规格</p>
					<div class="smallImg clearfix categ">
						<p class="fl" id="size1"></p>
						<p class="fl" id="size2"></p>
						<p class="fl" id="size3"></p>
						<p class="fl" id="size4"></p>
					</div>
					<p>数量&nbsp;&nbsp;库存<span id="span1"></span>件</p>
					<div class="num clearfix">
						<img class="fl sub" src="img/temp/sub.jpg">
						<span class="fl" id="snumber" contentEditable="true">1</span>
						<img class="fl add" src="img/temp/add.jpg">
						<p class="please fl">请选择商品属性!</p>
					</div>
				</div>
				<div class="btns clearfix">
					<a href="#2">
						<p class="buy fl" id="buyOrder">立即购买</p>
					</a>
					<a href="#2">
						<p class="cart fr" id="buyCar">加入购物车</p>
					</a>
				</div>
			</div>
		</div>
		<a class="more" href="proDetail.html">查看更多细节</a>
	</div>
	<!-- 购物车mask -->
	<div class="bj" style="top: 52%;width: 464px;position: fixed;top: 240px;">
		<div class="clearfix"><a class="fr gb" onclick="hidden1()"><img src="img/icon4.png" /></a></div>
		<h3>购买</h3>
		<form action="#" method="get">
			<p><label>请输入地址：</label><input type="text" id="omessage" value="" /></p>
			<p><label>商品名称：</label><input type="text" id="onote" value="" readonly /></p>
			<p><label>商品数量：</label><input type="text" id="onumber" value="" readonly /></p>
			<p><label>商品单价：</label><input type="text" id="danjia" value="" readonly /></p>
			<p><label>商品总价：</label><input type="text" id="zongjia" value="" readonly /></p>
			<p>
				<label>优惠券：</label>
				<select id="coupan">
					<option value="0">请选择优惠券</option>
					<option value="0">无/不使用</option>
				</select>
			</p>
			<p>实付：<span id="sf"></span></p>
			<div class="bc">
				<input type="button" value="购买" id="tobuy" />
				<input type="button" value="取消" onclick="hidden1()" />
			</div>
		</form>
	</div>
	<!--返回顶部-->
	<div class="gotop">
		<a href="cart.html">
			<dl class="goCart">
				<dt><img src="img/gt1.png" /></dt>
				<dd>去购<br />物车</dd>
				<span>1</span>
			</dl>
		</a>
		<a href="#" class="dh">
			<dl>
				<dt><img src="img/gt2.png" /></dt>
				<dd>联系<br />客服</dd>
			</dl>
		</a>
		<a href="mygxin.html">
			<dl>
				<dt><img src="img/gt3.png" /></dt>
				<dd>个人<br />中心</dd>
			</dl>
		</a>
		<a href="#" class="toptop" style="display: none;">
			<dl>
				<dt><img src="img/gt4.png" /></dt>
				<dd>返回<br />顶部</dd>
			</dl>
		</a>
		<p>400-888-8666</p>
	</div>
	<div class="msk"></div>
	<!--footer-->
	<div class="footer">
		<div class="top">
			<div class="wrapper">
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot1.png" /></a>
					<span class="fl">7天无理由退货</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot2.png" /></a>
					<span class="fl">15天免费换货</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot3.png" /></a>
					<span class="fl">满599包邮</span>
				</div>
				<div class="clearfix">
					<a href="#2" class="fl"><img src="img/foot4.png" /></a>
					<span class="fl">手机特色服务</span>
				</div>
			</div>
		</div>
		<p class="dibu">水果商城&copy;2022-2023公司版权所有 渝ICP备088800-44备0000111000号<br />
			违法和不良信息举报电话：188-8888-6666，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
	</div>

</body>


</html>